<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head>
<title>现金卡类型管理</title>
</head>
<body>
<div layout:fragment="content">
	<div class="row">
		<div class="col-md-12">
			<div class="btn-group pull-right">
				<a href="index.html" th:href="@{/promotion/cashcard/index/}" id="link_return" class="btn green">返回<i class="fa fa-arrow-circle-o-left"></i></a>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div class="form">
				<form role="form" id="form_cashCardPromotion_edit"  th:action="@{/promotion/cashcard/save}" th:object="${cashCardPromotion}" method="post" class="form-horizontal">
					<h4 class="form-section">现金卡类型信息</h4>
					<input id="hidden_id" type="hidden" th:field="*{id}" />
                    <input id="hidden_grantNum" type="hidden" th:field="*{grantNum}"/>
                    <input id="hidden_usedNum" type="hidden" th:field="*{usedNum}" />
					<div class="form-body">
						<div class="form-group" th:class="${#fields.hasErrors('name')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">现金卡类型名称<span class="required" aria-required="true">* </span></label>
							<div class="col-md-4">
								<input type="text" id="text_name" class="form-control" placeholder="现金卡类型名称" th:field="*{name}" required=""/>
								<span class="help-block" th:if="${#fields.hasErrors('name')}" th:errors="*{name}">现金卡类型名称不能为空</span>
							</div>
						</div>
                        <div class="form-group" th:class="${#fields.hasErrors('bonusPrice')}? 'form-group has-error' : 'form-group'">
                            <label class="control-label col-md-3">现金卡金额<span class="required" aria-required="true">*</span></label>
                            <div class="col-md-4">
                                <input type="text" id="text_bonusPrice" class="form-control" placeholder="现金卡金额" th:field="*{bonusPrice}"/>
                                <span class="help-block" th:if="${#fields.hasErrors('bonusPrice')}" th:errors="*{bonusPrice}">现金卡金额必须为数字</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">如何发放此类型现金卡<span class="required" aria-required="true">* </span></label>
                            <div class="col-md-6">
                                <div class="radio-list" >
                                    <label class="radio-inline" th:each="grantType : ${grantTypeList}"><span><input type="radio" th:attr="id=${'radio_grantType_'+grantTypeStat.index}" name="radio_grantType" th:field="*{grantType}" th:text="${grantType.description}" th:value="${grantType}"/></span></label>
                                </div>
                            </div>
                        </div>
                        <div id="goodsModel" class="form-group" th:class="${#fields.hasErrors('goodsIds')}? 'form-group has-error' : 'form-group'">
                            <label class="control-label col-md-3">商品货号<span class="required" aria-required="true">* </span></label>
                            <div class="col-md-4">
                                <input type="text" id="text_goodsIds" class="form-control" placeholder="输入商品货号，按‘,’分隔" th:field="*{goodsIds}"/>
                                <span class="help-block" th:if="${#fields.hasErrors('goodsIds')}" th:errors="*{goodsIds}">输入商品货号，按‘,’分隔</span>
                            </div>
                        </div>
                        <div class="form-group" th:class="${#fields.hasErrors('grantStartDate')}? 'form-group has-error' : 'form-group'">
                            <label class="control-label col-md-3">发放开始时间<span class="required" aria-required="true">* </span></label>
                            <div class="col-md-4">
                                <input type="text" id="text_grantStartDate" class="form-control" placeholder="发放开始时间" th:field="*{grantStartDate}"/>
                                <span class="help-block" th:if="${#fields.hasErrors('grantStartDate')}" th:errors="*{grantStartDate}">请输入发放开始时间</span>
                            </div>
                        </div>

                        <div class="form-group" th:class="${#fields.hasErrors('grantEndDate')}? 'form-group has-error' : 'form-group'">
                            <label class="control-label col-md-3">发放结束时间<span class="required" aria-required="true">* </span></label>
                            <div class="col-md-4">
                                <input type="text" id="text_grantEndDate" class="form-control" placeholder="发放结束时间" th:field="*{grantEndDate}"/>
                                <span class="help-block" th:if="${#fields.hasErrors('grantEndDate')}" th:errors="*{grantEndDate}">请输入发放结束时间</span>
                            </div>
                        </div>

                        <div class="form-group" th:class="${#fields.hasErrors('useStartDate')}? 'form-group has-error' : 'form-group'">
                            <label class="control-label col-md-3">使用开始时间<span class="required" aria-required="true">* </span></label>
                            <div class="col-md-4">
                                <input type="text" id="text_useStartDate" class="form-control" placeholder="使用开始时间" th:field="*{useStartDate}"/>
                                <span class="help-block" th:if="${#fields.hasErrors('useStartDate')}" th:errors="*{useStartDate}">请输入使用开始时间</span>
                            </div>
                        </div>

                        <div class="form-group" th:class="${#fields.hasErrors('useEndDate')}? 'form-group has-error' : 'form-group'">
                            <label class="control-label col-md-3">使用结束时间<span class="required" aria-required="true">* </span></label>
                            <div class="col-md-4">
                                <input type="text" id="text_useEndDate" class="form-control" placeholder="使用结束时间" th:field="*{useEndDate}"/>
                                <span class="help-block" th:if="${#fields.hasErrors('useEndDate')}" th:errors="*{useEndDate}">请输入使用结束时间</span>
                            </div>
                        </div>

                        <div class="form-group" th:class="${#fields.hasErrors('useRangeList')}? 'form-group has-error' : 'form-group'">
                            <label class="control-label col-md-3">使用范围<span class="required" aria-required="true">* </span></label>
                            <div class="col-md-4">
                                <label class="checkbox-inline"><input type="checkbox" id="checkbox_selectAll"/>全站</label>
                                <label class="checkbox-inline" th:each="useRange : ${useRangeValues}" ><input  type="checkbox" th:attr="id=${'checkbox_useRange_'+useRangeStat.index}" th:field="*{useRangeList}" th:text="${useRange.description}" th:value="${useRange}"/></label>
                                <span class="help-block" th:if="${#fields.hasErrors('useRangeList')}" th:errors="*{useRangeList}">至少选择一项</span>
                            </div>
                        </div>
					</div>
					<div class="form-actions fluid">
						<div class="col-md-offset-3 col-md-9">
							<button type="submit" id="bt_submit" name="bt_submit" class="btn blue">提交</button>
							<!-- <button type="reset" id="btn_reset" name="btn_reset" class="btn default">清空</button> -->
						</div>
					</div>
				</form>		
			</div>
		</div>
	</div>
</div>	
</body>
</html>

<script th:inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function(){

        var grantType = $("[name=grantType]:radio:checked").val();
        $("#goodsModel").hide();

        if(grantType =="GOOD") {
            $("#goodsModel").show();
        }

        $("[name=grantType]:radio").click(function () {

            $("#goodsModel").hide();

            if ($(this).val() == "GOOD") {
                $("#goodsModel").show();
            }

        });

        $("#checkbox_selectAll").click(function(){

            var checker = this.checked;
            $("input[name='useRangeList']").each(function(){
               this.checked = checker;
               if(checker) {
                   $(this).parent().addClass("checked");
               }else {
                   $(this).parent().removeClass("checked");
               }
            });
        });

        $("#text_grantStartDate").click(function(){
            WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
        }).focus(function () {
            WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
        });
        $("#text_grantEndDate").click(function(){
            WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
        }).focus(function () {
            WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
        });
        $("#text_useStartDate").click(function(){
            WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
        }).focus(function () {
            WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
        });
        $("#text_useEndDate").click(function(){
            WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
        }).focus(function () {
            WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
        });

        $("#form_cashCardPromotion_edit").validate({
            rules:{
                name:{
                    required:true,
                    maxlength:250
                },
                bonusPrice:{
                    required:true,
                    number:true,
                    max:99999999
                },
                grantType:"required",
                grantStartDate:"required",
                grantEndDate:"required",
                useStartDate:"required",
                useEndDate:"required",
                useRangeList:"required",
                remark:{
                    maxlength:250
                }
            },
            messages:{
                name:{
                    required:"请输入现金卡类型名称",
                    maxlength:"最大不能超过250个字符"
                },
                bonusPrice:{
                    required:"请输入现金卡金额",
                    number:"请输入正确的金额",
                    max: "金额不能大于99999999"
                },
                grantType:"请选择发放类型",
                grantStartDate:"请输入发放开始时间",
                grantEndDate:"请输入发放结束时间",
                useStartDate:"请输入使用开始时间",
                useEndDate:"请输入使用结束时间",
                useRangeList:{
                    required:"至少选择一项"
                },
                remark:{
                    maxlength:"最大不能超过250个字符"
                }

            }
        });
    });

    /*]]>*/
</script>